<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="智慧农业">
<meta name="description" content="智慧农业">
<title>视频监控</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="shortcut icon" type="image/x-icon" href="${basePath}/resources/common/favicon.ico" media="screen" />
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="${basePath}/resources/adminlte/bootstrap/css/bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/AdminLTE.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div>

		<div class="box box-primary">
			<div class="box-header with-border">
				<h3 class="box-title">监控列表</h3>
			</div>
			<div id="videoList" class="box-body">
			</div>
		</div>


	</div>
	<script src="${basePath}/resources/adminlte/plugins/jQuery/jQuery-2.2.0.min.js"></script>
	<script src="${basePath}/resources/adminlte/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${basePath}/resources/common/js/base.js"></script>

	<script>
		$(function() {
			initVideoList();
		});

		function initVideoList() {
			var url = '${basePath}/mobile/getCameras/';
			$.ajax({
		        type: "GET",
		        url: url,
		        dataType: "json",
		        success: function(data){
		        	if (data && data.length > 0) {
		        		var nodeHtml = '';
		    			for (var i = 0; i < data.length; i++) {
		    				nodeHtml += '<div onclick="playVideo(\''+data[i].id+'\');">';
		    				nodeHtml += '<strong><i class="fa fa-book"></i> ' + data[i].name + ' </strong>';
		    				nodeHtml += '<p class="text-muted">'+data[i].deviceSerial+' '+ data[i].cameraAdd + '</p>';
		    				nodeHtml += '</div><hr>';
		    			}
		    			console.info(nodeHtml);
		    			$("#videoList").empty();
		    			$("#videoList").append(nodeHtml);

		    		}
		        }
		    });
		}
		
		function playVideo(id){
			window.location.href = '${basePath}/mobile/toVideoPlay/'+id;
		}

	</script>

</body>
</html>
